Designing with Color for Inclusive and Effective Data Visualization

A Guide to Color Science, Human Perception, and Accessibility

Author
Affiliation

Madoc Alder Marshall

Association of State and Territorial Health Officials

Version

0.2.0

Draft Last Modified:

December 17, 2025

Status

Revised draft for review and feedback

This guide was created to support KY in developing accessible data visualization color palettes for their larger data viz style guide (PHIG TA Request #55967). The urgency of this work is driven by the U.S. Department of Justice’s 2026 deadline for state and local governments to comply with updated ADA Title II rules, which mandate WCAG 2.1 AA conformance for all digital content. Our goal is to provide KY with an actionable framework to build accessible color systems that follow accessibility best practices. This document also serves as a foundational model for a broader, proactive TA resource on developing fully accessible and compliant data viz style guides.

KY Color Palettes: Revised Draft

ImportantDraft Notes

These palettes have been tested with WCAG 2.1 AA and AAA contrast standards, along with APCA standards. They have also been tested to remain visually distinct for all main CVD variants.

You can hover over a color to view its WCAG and APCA contrast levels for both black and white text.

Click on a color to copy its hex code to your clipboard.

Note that any palette with more than 6 distinct colors will no longer be visually distinct in greyscale (e.g., achromatic CVD).

Categorical Palettes

Sequential & Diverging Palettes

Dual Color Palettes

Pattern Fills

Practical Guide to Developing Accessible Color Systems for Data Viz

Core Principles

Before building a palette, it’s crucial to understand the core principles that make it work.

1. Using Perceptual Color Spaces (CIELAB/LCh) for Uniform Palettes

The Problem with HSL: While more intuitive and easier to compute than RGB, HSL (Hue Saturation Lightness) does not match human vision. Colors with the same “Lightness” value (e.g., a blue and a yellow) can have wildly different perceived brightness, creating jarring and unbalanced palettes.

The Solution - CIELAB/LCh: These color models are designed around human perception. Using them ensures that colors meant to have the same perceived lightness actually do. This is the foundation for a professional, harmonious color system.

TipFor more on the science behind color perception, see Colorimetry: The Science of Quantifying Color

2. How CVD Impacts Data Interpretation

If color is the only way to convey information, your visualization will fail for users with Color Vision Deficiency (CVD).

TipRead more about the diversity of human vision experiences, including the different types of CVD.

Real-world consequence: A line chart where the “profit” and “loss” lines are only distinguishable by a red/green hue will be unreadable to a significant portion of the audience, leading to misinterpreted data and poor decisions.

3. The Four Types of Data Palettes

Choose your palette based on the story your data tells:

  • Qualitative: For categorical data with no inherent order (e.g., product categories, regions). Colors should be distinct but have similar perceived lightness.

  • Sequential: For numeric data that goes from low to high (e.g., temperature, population density). Use a light-to-dark gradient of a single hue or a perceptually uniform multi-hue gradient.

  • Diverging: For data that deviates from a critical midpoint (e.g., profit/loss, deviation from an average). Use two contrasting hues on the ends and a neutral light color in the middle.

  • Highlight/Focused: Can be used with multiple data types and is useful for lowering the cognitive load for the audience of a visualization by focusing on one point, category, etc. Use greys or neutral colors along with one perceptually contrasting color to draw attention.

4. Applying Modern Contrast Standards (WCAG & APCA)

  • WCAG 2.1: The current legal baseline. It provides a simple ratio (e.g., 4.5:1 for text) but is flawed, especially for dark backgrounds and colored text.
  • APCA (The Future): A context-aware model that considers font weight, size, and spatial properties. It more accurately predicts actual readability and is essential for modern interfaces like dark mode.

5. Strategic Use of Color for Pre-attentive Processing

  • Use high-contrast, saturated colors to make the most important data points “pop” and guide the viewer’s attention instantly.
  • Use more muted colors with lower (but still accessible) contrast for context and background elements. This creates lower cognitive load via visual hierarchy without relying solely on legends.
TipRead more about color and pre-attentive responses

A Detailed Process for Developing Accessible Data Viz Color Palettes

Follow this step-by-step workflow to build a system that is both beautiful and inherently accessible.

Phase 1: Foundation & Strategy

Step 1: Audit Your Data & Chart Types
  • List the types of visualizations you commonly use (bar charts, line graphs, heat maps, etc.).
  • Identify the types of data you display:
    • How many categories do you typically have?
    • Do you often show “positive/negative” or “deviation from a goal”?
    • Do you often need to guide your audience to a specific value?
    • This tells you whether you need Qualitative, Sequential, and/or Diverging palettes, as well as if you need any highlight/focus palettes.
TipReference The Four Types of Data Palettes for more information.
Step 2: Define Palette Requirements
  • Categorical Needs: “We need a qualitative palette with at least 6 distinguishable colors.”
  • Sequential Needs: “We need a sequential palette for metrics from 0-100%.”
  • Diverging Needs: “We need a diverging palette to show performance above/below a target.”
  • Highlight Needs: “We need a focusing color palette to highlight the top performance category.”
  • Brand Constraints: Identify any non-negotiable brand colors that must be incorporated, and any colors that must be avoided.

Phase 2: Palette Creation in a Perceptual Space

Step 3: Choose a Perceptual Color Space
  • Tooling: Use a tool that works in LCh or CIELAB, such as the Accessible Palette web app (which is based on the javascript library Chroma.js).
  • Action: Do not start in HSL. Build your palette in a perceptual space from the beginning.
Step 4: Build the Qualitative Palette First

  1. Select your first hue (often a brand color).

  2. Choose a Lightness (L) and Chroma (C) value that feels balanced.

  3. To generate the next color, move significantly in Hue (e.g., 60-90 degrees) while keeping Lightness and Chroma nearly constant.

  4. Repeat, ensuring all colors have a similar perceived “weight” on the page.

  5. The Grayscale Test: Convert your palette to grayscale (or use a tool like Susie Lu’s Viz Palette Web App) If the colors become muddled and hard to distinguish, adjust their Lightness values until they are clearly different even without color.

    Once you get to palettes with more than 6 colors, passing the grayscale test will no longer be possible. This is one example of why even with optimized color palettes, you must avoid communicating any information with color alone.

Step 5: Build Sequential & Diverging Palettes
  • Sequential: Start with a very light, desaturated version of your color (high L, low C) for the low end. Progress to a dark, saturated version (low L, high C) for the high end. The steps in between should feel perceptually uniform.
  • Diverging: Start with your “negative” hue (e.g., a cool color like blue) on one end and your “positive” hue (e.g., a warm color like orange) on the other. Meet in the middle with a very light, near-neutral color (e.g., light gray or beige).

Phase 3: Accessibility Validation & Refinement

Step 6: Contrast Checking
  • Use a tool like the Accessible Palette web app or the APCA Contrast Calculator to check that the contrast meets legal compliance requirements (WCAG compliance standards), as well as APCA contrast requirements.
    • For visual data objects: If you test the colors against white or black backgrounds, you will need to ensure all viz objects in those colors have an outline in the respective color to ensure it maintains contrast standards.
    • For Text/Labels: Ensure that both text-on-background and data-label-on-color pairs meet the thresholds for readability.
    • Key Check: Verify contrast for both light and dark mode backgrounds.
Step 7: CVD Simulation Testing
  • Tooling: Use a tool like Susie Lu’s Viz Palette Web App, Coblis Color Blindness Simulator, or the simulator in your browser’s developer tools.
  • Action: Apply the CVD filters to your entire screen and look at your example charts.
  • Ask: Can I still distinguish all data series? Does the meaning of the sequential/diverging scale remain clear? If not, go back to Step 4 and adjust Lightness and Chroma.
Step 8: Implement Non-Color Redundancy

This is a critical step that makes your visualizations truly robust.

  • Direct Labeling: Plan to place text labels directly on data points instead of relying on a color legend.
  • Patterns & Textures: For filled areas (like stacked bars), have a library of patterns (stripes, dots) to pair with colors.
  • Shapes: In scatter plots, assign a unique shape (circle, square, triangle) to each category in addition to color.

Phase 4: Tooling, Documentation & Integration

Step 9: Codify and Document
  • Create a central document (a “style guide”) that displays all approved palettes with their HEX/RGB values. For each palette, include:
    • Use Case: “Qualitative Palette A - for general categorical data.”
    • Accessibility Notes: “Tested for Deuteranopia and Tritanopia. Passes grayscale test.”
    • Contrast Ratings: “Do not use #ABC123 for text smaller than 16px.”
Step 10: Integrate into Workflow & Tools
  • Design Tools: Add the palettes to your Figma, Sketch, or other relevant libraries.
  • Code: Export the colors as CSS variables (e.g., --color-data-category-1: #123abc;) and/or into a design token system.
  • Templates: Create chart templates in your data viz tool softwares (like Excel or Tableau) that use the accessible palettes by default.

By following this process, you move from ad-hoc, potentially problematic color choices to a systematic, reliable, and inclusive color system that ensures your data’s story is clear to everyone.

Color Science, Human Perception, and Accessibility: A Deep Dive

Part 1: The Science of Color and Human Perception

What is Color, Really?

The word “color” means different things in different fields:

  • A lamp maker thinks of color as the physical light a bulb produces.

  • An artist might think of it as a pigment or paint.

  • A psychologist thinks of it as the sensation we experience.

  • A physicist defines color as specific wavelengths of light within the visible spectrum that humans can see.

Because of these different perspectives, it’s helpful to make a clear distinction:

  • Color Stimulus: This is the physical source—like the light from a lamp or the wavelengths reflected by a paint. It’s the objective, measurable part.

  • Color Sensation (or Perception): This is the color you actually see. It’s the personal experience created when your eyes and brain process the color stimulus.

Putting it all together:

In physics, color is defined by wavelengths of light in the visible spectrum (roughly between 400 and 700 nanometers). The human eye perceives these wavelengths as different colors. For example, 400 nm wavelengths appear as a dull violet, and 700 nm as a dull red.

Materials like pigments, inks, and paints are what we use to create a color stimulus, but they themselves are not “color.” They work by absorbing some wavelengths of light and reflecting others, which then become the stimulus for our color sensation.

The Mechanics of Human Vision

  • Brief overview of how our eyes and brain process light to create color sensation
  • Light of various wavelengths hits the eye’s lens, which focuses the light onto the light-sensitive cells in the back of the eye (the retina)
  • There are 3 main kinds of light-sensitive cells, but in this context we are most interested in cones, which are the cells responsible for daylight and color vision
    • The other main kinds are rods, which help with night vision and ganglion cells, which help the eye adjust the amount of light that enters the eye, among other things
  • Typically, humans have 3 kinds of cones that respond most to different wavelengths:
    • S cones are most sensitive to shorter wavelengths, M cones to medium wavelengths, and L cones to long wavelengths.
  • The home of the light sensitive cells, the retina, connects to a part of the brain called the thalamus brain via the optic nerve
  • The thalamus processes the information from both eyes and sends it to the visual cortex
  • This is where the sensation of color actually begins! The visual cortex starts by processing lightness/darkness contrast, finding edges and fine details. Then, later stages separately process the color hue and chroma of the image
  • This image is then sent to the prefrontal cortex, which processes that information along with other information, like emotions and memories. This all helps us to not only see but to understand what we are seeing and make sense of objects, movement, depth perception, light and color.

Colorimetry: The Science of Quantifying Color

Colorimetry is the science of measuring color and using math to describe how we perceive it. It’s the foundation for all our modern color technology, from color TV to the screens on our smartphones and computers.

This entire field is based on a standard color model created in 1931, known as the CIE color space.

A color space is a specific system for defining and naming colors. Think of it like a recipe that uses numbers to describe a color precisely.

Different color spaces are made for different purposes:

  • For Screens and Print: Color spaces like RGB (for TVs, computers, and phones) and CMYK (for printers) are based on how these devices create color by mixing light or ink.

  • For Human Vision: Some color spaces are designed to match how our eyes actually see color.

  • For Specific Tasks: Others are created to be useful for particular jobs, like photo editing or scientific work.

The associated graphic is a map of human color vision. The full, kidney-shaped area shows every color a typical human eye can see based on the CIE color space.

Graph displaying the range of typical human color vision with shapes overlaid showing the colors that can be represented in sRGB and CMYK color spaces.

.

Three circles (one blue, one green, and one red) on a black background overlap as if a venn diagram where 2 circles overlap to make cyan, yellow, and magenta, and then shows white where all three overlap.

The triangle inside shows the range of colors a standard computer monitor can display (sRGB). This is an example of additive color mixing, where adding one set of wavelengths to another to create a new color.

Three circles (one cyan, one magenta, and one yellow) on a white background overlap as if a venn diagram where 2 circles overlap to make red, green, and blue, and then shows black where all three overlap.

The pentagon shaped shows the range of colors available via CMYK printing, which is a form of subtractive color mixing. Instead of adding light, it creates color by removing or absorbing certain wavelengths of light. Think about mixing paints or inks. Each paint absorbs specific colors of light and when you mix two paints, they absorb more light together. You only see the color that both paints reflect back. In other words, mixing subtracts or “deletes” wavelengths of light before they reach your eye.

Why HSL Fails for Accessible Color Systems

While HSL (Hue, Saturation, Lightness) is popular in design tools because it’s more intuitive for humans to understand than RGB, it has a critical flaw for accessibility work: its “Lightness” value is not perceptually uniform.

In HSL, colors with the same Lightness value can have wildly different perceived brightness to the human eye. For example, at Lightness: 50%, a pure yellow (#FFFF00) appears very light and bright, while a pure blue (#0000FF) appears much darker. This inconsistency makes HSL unreliable for building color systems where you need predictable contrast ratios and consistent visual weight across different hues.

The Solution: CIELAB and LCh Color Spaces

For accessible data visualization, we recommend using CIELAB and its cylindrical representation LCh (Lightness, Chroma, hue). These color spaces are perceptually uniform. This means that a numerical change in a color’s Lightness (L) value corresponds to a consistent change in how light or dark it appears to the human eye, regardless of its hue.

Key advantages of CIELAB/LCh:

  • Predictable Contrast: Colors with the same L* value have the same perceived brightness, making contrast calculations reliable
  • Accessible-by-Design: Built-in perceptual uniformity means your palettes will be more accessible from the start
  • Consistent Visual Weight: Your qualitative palettes will have colors that feel equally “heavy” on the page

Part 2: The Diversity of Human Color Perception

The Magic of Perspective: Colors as We See Them

What we see is shaped by a combination of factors, including:

  • Contrast and Focus: How our eyes distinguish objects and read text.

  • Individual Variation: Our unique biological makeup, including the types of color-sensitive cells (cones) in our eyes.

  • Cognitive Load: The mental effort required to interpret a visual. Complex or confusing visuals create high cognitive load, making them difficult for everyone, especially people with cognitive disabilities.

Our perception of color is not a single, universal experience. It varies greatly from person to person based on biology, age, and culture. Effective design doesn’t assume a “normal” viewer; instead, it anticipates and plans for this human diversity from the very beginning.

Biological Diversity in Vision

Vision differences are common and exist on a spectrum. Designing for this diversity is a core principle of accessibility.

Color Vision Deficiency (CVD) means a person has trouble distinguishing between certain colors. It is often called “color blindness,” but true color blindness (seeing only in black and white) is very rare. Most people with CVD see colors, but differently.

The most common types affect how people see reds and greens. They are caused when one type of color-sensitive cell in the eye (called a cone) doesn’t work properly or is missing.

  • Protanopia (L cone deficiency) Red appears dimmer and can be hard to tell apart from green.
  • Deuteranopia (M cone deficiency): This is the most common type. It’s hard to tell reds and greens apart, but colors don’t look dimmer.
  • Tritanopia (S cone deficiency): This is very rare. It causes confusion between blue and yellow.
  • Achromatopsia (2 or 3 cone deficiency): Non-color, or achromatic, types are the rarest. Folks experiencing this type usually face other vision difficulties, including poor and severe photophobia.

Vision changes throughout our lives. Key factors that affect legibility include:

  • Contrast Sensitivity: This is how well we can detect the difference between an object and its background. It is different from color perception. As we age, or for those with low vision, reduced contrast sensitivity can make light gray text on a white background very hard to read.
  • Visual Acuity: This is the sharpness of our focus. “20/20 vision” is a standard measure, but it is not perfect vision. Many people have vision that is less sharp, making small, thin text difficult to read.

Cultural & Psychological Considerations

Cultural Symbolism and Connotations:

Color is a powerful communication tool, but its meaning is deeply shaped by culture and context. Using it effectively requires us to think beyond our own assumptions. The meaning of a color is not universal; it is deeply shaped by culture, history, and tradition. The same color can have completely different connotations in different parts of the world.

While most fully developed languages have words for the same eleven basic colors (white, black, red, green, yellow, blue, brown, grey, orange, purple, pink), the symbolic meanings attached to them can vary dramatically.

Examples of Cultural Color Symbolism:
  • White: In Western cultures, it often symbolizes purity and weddings. In many Eastern cultures, it is the color of mourning and funerals.
  • Red: In China, it is a lucky color associated with prosperity and celebration. In South Africa, it is a color of mourning.
  • Purple: In ancient Rome, Tyrian purple dye was so rare and expensive that it became the color of emperors and senators. This association with royalty and status continues in many parts of the world today.

Check out Colours in Cultures, an infographic that visualizes color meanings across cultures

Avoiding Stereotypes:

It is crucial to move away from stereotypical color associations, such as using pink for girls and blue for boys in gender data visualizations.

  • These choices can mislead readers and reinforce harmful biases. * Instead, choose colors based on the data’s context or to deliberately challenge conventions (without obfuscating or confusing the audience)

Key Takeaway: When choosing colors for a global audience, it is crucial to research their cultural meanings to ensure your message is interpreted correctly and respectfully.

Emotional and Pre-attentive Responses:

Color has a powerful, often instantaneous, effect on our emotions and where we focus our attention. This happens both through learned cultural associations and through innate, pre-attentive processing (how our brain interprets visual information before we are even consciously aware of it). While personal experience plays a role, studies suggest some emotional links to color are widely shared. Common associations include:

  • Red: Energy, passion, danger, excitement
  • Blue: Calm, trust, stability, peace
  • Yellow: Happiness, optimism, warmth
  • Green: Growth, nature, relaxation, wealth
Using Color in Design:
  • Guiding Attention: High-contrast, saturated colors can make key data “pop” and direct the viewer’s focus pre-attentively (before they even consciously think about it).
  • Evoking Meaning: While personal experiences vary, some color-emotion links (e.g., red for urgency, blue for calm) are widely shared and can be used to support your narrative.
  • Reducing Cognitive Load: A strategic color hierarchy helps viewers understand what is most important without unnecessary mental effort.
WarningA Note on ‘Color Psychology’

It’s important to distinguish between observed trends and unproven theories. While evidence shows color affects mood and attention, systems that claim to diagnose personality types based on color preferences (like some outdated models from Carl Jung) are not scientifically supported.

Part 3: Color and Digital Accessibility

WCAG’s Color & Contrast Criteria: The “Old” Standard

To make digital content accessible, the Web Content Accessibility Guidelines (WCAG) set a baseline for color contrast. These guidelines ensure that text stands out enough from its background for people to read it.

AA and AAA Compliance Levels:

  • Level AA is the standard minimum requirement for most organizations. It ensures accessibility for a wide range of users. WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, graphics and user interface components (such as form input borders).

  • Level AAA is a higher, more stringent level of contrast, recommended for critical text and larger audiences. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

In short: WCAG 2.1 provides a simple, widely-used set of rules that is the current legal and industry baseline. Starting in April 2026, state and local governments’ web content and mobile apps must meet at least WCAG 2.1, Level AA compliance standards.

The Emergence of APCA (Accessible Perceptual Contrast Algorithm)

APCA is a modern, more sophisticated method for calculating contrast that is being developed as the future standard (for WCAG 3). It recognizes that human perception of contrast is more complex than simple color ratios.

APCA has three levels of conformance: bronze, silver, and gold.

  • The Bronze level requirements are:

    • a minimum contrast of Lc 75 and a preferred contrast of Lc 90 for body text;

    • a minimum contrast of Lc 60 for large fluent text (fonts 16px or larger);

    • a minimum contrast of Lc 45 for large fluent content (including text larger than 32px) and a maximum of Lc 90 specifically for large & bold text.

  • The Silver and Gold levels are more complex.

    • You can check the requirements for specific font size and weight combinations using the applicable APCA Font Lookup Tables.
Key Advantages of APCA:

  • Context-Aware: It considers the text’s font weight, size, and background to determine the required contrast. A small, thin font needs more contrast than a large, bold one.

  • Human-Perception Based: It is directly tuned to how our eyes and brain actually perceive lightness and darkness.

  • Better Predicts Readability: It more accurately predicts what is truly readable, especially for dark mode, light text on colored backgrounds, and other situations where the old WCAG formula falls short.

In short: APCA is a smarter, more accurate tool that ensures readability based on real-world human vision science.

WCAG vs. APCA: A Comparative Analysis

While WCAG 2 is the current enforceable standard, APCA represents the future direction of accessibility.

  • WCAG .12 is a simple, one-size-fits-all rule that is good for basic compliance but can be both too strict in some cases and not strict enough in others.

  • APCA is a flexible, context-sensitive guide that provides better, more practical results for designers and a better experience for users.

The industry direction is moving toward adopting APCA, but for now, many organizations must still follow WCAG 2.1 for legal compliance.

Other Critical Guidelines:

Good color contrast is essential, but it’s only one part of digital accessibility.

  • Don’t Use Color Alone: Never rely solely on color to convey information. For example, in a chart, use a pattern or an icon in addition to color. If a form field is missing information, don’t just make the label red; also add an icon or text message.

  • Provide Text Alternatives: Any information that is presented only in color (like a color-coded map) must have a text alternative. This ensures that users who cannot see the color, including those using screen readers, can still understand the content.

  • Structuring for Screen Readers: Using proper ARIA tags and semantic structure in code is essential for making complex SVG visualizations accessible.

In short: Color is a powerful tool, but it must be paired with other cues to be truly accessible to everyone.

Appendix

Terms and Definitions

Additive Color Mixing
Creating colors by adding different wavelengths of light together (used in screens).
APCA (Accessible Perceptual Contrast Algorithm)
A modern method for calculating color contrast that considers human perception factors like font size and weight.
CIELAB/LCh
Color spaces designed around human perception that ensure colors have consistent perceived lightness.
Cognitive Load
The mental effort required to understand information.
Colorimetry
The science and technology of quantifying and describing color and how we perceive it.
Color Sensation/Perception
The personal experience of color that our brain creates when processing color stimuli.
Color space
A specific system for defining and naming colors. Think of it like a recipe that uses numbers to describe a color precisely.
Color Stimulus
The physical source of color - measurable light waves or reflected wavelengths that enter our eyes.
Color Vision Deficiency (CVD)
A condition where people have difficulty distinguishing between certain colors, often called “color blindness.”
Cones
Light-sensitive cells in the retina responsible for color vision in daylight conditions.
Contrast Sensitivity
How well we can detect differences between an object and its background.
Diverging Palette
Colors that use two contrasting hues on the ends with a neutral middle, used for data that deviates from a midpoint.
HSL (Hue, Saturation, Lightness)
A color model that computers use but doesn’t match human color perception well.
Pre-attentive Processing
How our brain processes visual information before we’re consciously aware of it.
Qualitative Palette
Colors used for categorical data that has no inherent order.
Retina
The light-sensitive layer at the back of the eye that contains cells for detecting light and color.
Sequential Palette
A color gradient from light to dark used for numeric data that goes from low to high values.
Subtractive Color Mixing
Creating colors by removing or absorbing certain wavelengths of light (used in printing).
Visual Acuity
The sharpness or clarity of vision.
Visual Cortex
The part of the brain that processes visual information and creates our sensation of color.
Wavelengths
The physical measurement of light that determines what color we see, measured in nanometers (nm).
WCAG (Web Content Accessibility Guidelines)
International standards for making web content accessible to people with disabilities.

Resources

Tools

Additional Reading

Reference Materials